<template>
    <div class="bwl-detail">
        <!-- 卡片展示区域 -->
        <van-row class="bwl-detail-card">
            <van-row class="bwl-detail-row">
                <span>{{ bwl.task }}</span>
                <span class="platform-logo">
                    {{ bwl.platform }}
                </span>
            </van-row>

            <van-row class="bwl-detail-row">
                <span>支付本金 {{ bwl.benjin }} 元</span>
                <div>
                    <span>{{ bwl.is_benjin_return ? "已返" : "未返" }}</span>
                    <van-switch v-model="bwl.is_benjin_return" size="20px" />
                </div>
            </van-row>

            <van-row class="bwl-detail-row">
                <span>佣金收益 {{ bwl.yongjin }} 元</span>
                <div>
                    <span>{{ bwl.is_yongjin_return ? "已返" : "未返" }}</span>
                    <van-switch v-model="bwl.is_yongjin_return" size="20px" />
                </div>
            </van-row>

            <div class="van-hairline--bottom"></div>

            <p>备注：{{ bwl.mark }}</p>
        </van-row>

        <!-- 提交按钮 -->
        <van-button
            block
            plain
            hairline
            type="primary"
            size="small"
            @click="onSaveClicked"
            >保存</van-button
        >
        <van-button
            block
            plain
            hairline
            type="danger"
            size="small"
            @click="onDeleteClicked"
            >删除</van-button
        >
    </div>
</template>

<script>
const platformType = ["京东", "淘宝", "拼多多"];
export default {
    created() {
        this.getDetail();
    },
    data() {
        return {
            bwl: {},
        };
    },
    methods: {
        async getDetail() {
            const res = await this.$http.get(`/bwls/${this.$route.params.id}`);
            res.data.platform = platformType[res.data.platform - 1];
            res.data.is_benjin_return = Boolean(res.data.is_benjin_return);
            res.data.is_yongjin_return = Boolean(res.data.is_yongjin_return);
            this.bwl = res.data;
        },
        async onSaveClicked() {
            const { is_benjin_return, is_yongjin_return } = this.bwl;
            console.log({ is_benjin_return, is_yongjin_return });
            const res = await this.$http.put(`/bwls/${this.$route.params.id}`, {
                is_benjin_return,
                is_yongjin_return,
            });
            // 修改失败
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 修改成功
            this.$toast({
                type: "success",
                message: "修改成功",
            });
            // 再刷新一次，从数据库中获取值，重新渲染一次
            this.getDetail();
        },
        onDeleteClicked() {
            // 删除前确认
            this.$dialog
                .confirm({
                    title: "⚠️ 操作警告",
                    message: "你确定删除这个备忘录吗？",
                })
                .then(async () => {
                    // 发送请求去删除
                    const res = await this.$http.delete(
                        `/bwls/${this.$route.params.id}`
                    );
                    // 删除失败
                    if (res.code !== 204) {
                        this.$toast({
                            type: "fail",
                            message: res.message,
                        });
                    }
                    // 删除成功，跳转到列表页
                    this.$router.push("/bwl/list");
                })
                .catch(() => {
                    // on cancel
                    console.log("你不想删了！");
                });
        },
    },
};
</script>

<style lang="less" scoped>
.bwl-detail {
    height: 100vh;
    background-color: #eee;
    padding: 5px 10px;

    &-card {
        background-color: #fff;
        border-radius: 15px;
        padding: 15px;

        .platform-logo {
            display: inline-block;
            border: 1px solid orange;
            width: 54px;
            height: 54px;
            line-height: 54px;
            border-radius: 50%;
            text-align: center;
            transform: rotate(-10deg);
            color: orange;
        }
    }

    &-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 55px;
    }

    .van-button {
        margin-top: 10px;
    }
}
</style>
